<template>
  <div class="family-info">
    <!-- 标题 -->
    <div class="title-wrapper">
      <div class="title-bar"></div>
      <span class="title-text">家庭信息</span>
    </div>

    <!-- 横线 -->
    <div class="divider-wrapper">
      <div class="highlight-line"></div>
    </div>

    <!-- 主体部分 -->
    <div class="content-wrapper">
      <el-table
        :data="familyData"
        class="bottom-border-only"
        :header-cell-class-name="'bold-header'"
      >
        <el-table-column
          v-for="col in tableColumns"
          :key="col.prop"
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
          align="center"
        />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from "@/store/modules/user";
import { defineProps, onMounted, ref } from "vue";
import { familyInfo } from "@/api/business/sperm";

const userStore = useUserStore();
const userId = ref();

const loading = ref(true);

// 表格列配置
const tableColumns = [
  { prop: "relative", label: "关系" },
  { prop: "age", label: "年龄" },
  { prop: "height", label: "身高" },
  { prop: "weight", label: "体重" },
  { prop: "race", label: "种族" },
  { prop: "hairColor", label: "发色" },
  { prop: "eyeColor", label: "瞳色" },
  { prop: "occupation", label: "职业" },
  { prop: "healthStatus", label: "健康状况" },
  { prop: "education", label: "学历" },
];

// 表格数据
const familyData = ref([]);

/**
 * 获取家庭信息列表
 */
function getList() {
  loading.value = true;
  familyInfo({ userId: userId.value })
    .then((res) => {
      familyData.value = res.data;
    })
    .finally(() => {
      loading.value = false;
    });
}

const props = defineProps({
  userId: {
    type: String,
    required: true,
    default: "",
  },
});

onMounted(() => {
  userId.value = props.userId;
  getList();
});
</script>

<style lang="scss" scoped>
/* ===== 仅对「没写过字体/颜色」的文字补微软雅黑 + #333 ===== */
.family-info {
  font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
  color: #333;
}
/* ========================================================= */

/* 根容器 */
.family-info {
  /* 无需额外样式 */
}

/* 标题区域 */
.title-wrapper {
  margin-top: 20px;
  display: flex;
  align-items: center;

  .title-bar {
    width: 6px;
    height: 26px;
    background-color: #2b5cab;
  }

  /* 已定义字体颜色，保持不变 */
  .title-text {
    margin-left: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #2b5cab;
  }
}

/* 横线装饰 */
.divider-wrapper {
  height: 1px;
  background-color: #2b5cab;
  margin-top: 18px;
  position: relative;

  .highlight-line {
    width: 460px;
    height: 5px;
    background: linear-gradient(to right, #2b5cab, #cedbf0);
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* 主体内容 */
.content-wrapper {
  border-radius: 8px;
  border: 1px solid #a2c4e8;
  margin-top: 23px;
  padding: 20px 20px;

  /* 表头文字加粗（已定义颜色，保持不变） */
  :deep(.bold-header) {
    font-weight: bold;
    color: #000000;
  }

  /* 表格单元格文字黑色（已定义颜色，保持不变） */
  :deep(.el-table__row) {
    color: #000000;
  }

  /* 只保留底部边框 */
  :deep(.el-table__inner-wrapper::before) {
    height: 1px;
    background-color: #dcdfe6;
  }

  :deep(.el-table td),
  :deep(.el-table th.is-leaf) {
    border-bottom: none;
  }
}
</style>
